<template>
  <view v-if="shenheStatus == 0" class="page">
    <u-sticky>
      <view class="search">
        <u-search
          :show-action="false"
          placeholder="请输入店铺名称搜索"
          v-model="store_name"
          @search="clearData"
        ></u-search>
      </view>
    </u-sticky>

    <view class="list">
      <view class="item" v-for="item of list" :key="item.id">
        <view class="item-hd">
          <view class="img">
            <image :src="item.cover_url" mode="aspectFill"></image>
            <view v-if="item.open_status == 0" class="status">已打烊</view>
          </view>
          <view class="con">
            <view class="title">{{ item.name }}</view>
            <view class="p">
              <view class="let">
                {{
                  item.province_name +
                  item.city_name +
                  item.district_name +
                  item.address
                }}</view
              >
              <view class="distance">{{ item.distance }}</view>
            </view>
            <view class="p">
              <view class="let"> {{ item.mobile }}</view>
            </view>

            <view class="time"
              >营业时间 {{ item.start_time + "-" + item.end_time }}</view
            >
          </view>
        </view>
        <view class="item-fd">
          <view class="btn" @click="handle('location', item)">
            <i class="iconfont icon-daohang"></i>
            <text>导航到店</text>
          </view>
          <view class="btn" @click="handle('tel', item)">
            <i class="iconfont icon-telephone-out1"></i>
            <text>致电咨询</text>
          </view>
          <view class="btn" @click="handle('share', item)">
            <i class="iconfont icon-store"></i>
            <text>进入门店</text>
          </view>
        </view>
      </view>
    </view>
    <toolsMore :status="moreStatus"></toolsMore>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
import toolsMore from "@/components/tools/tools-more.vue";
export default {
  components: {
    Shenhe,
    toolsMore
  },

  data() {
    return {
      store_name: "",

      list: [],
      moreStatus: 1,
      page: 1,
      isEnd: false,
      longitude: "",
      latitude: ""
    };
  },

  onLoad() {
    this.clearData();
  },

  methods: {
    clearData() {
      this.page = 1;
      this.isEnd = false;
      this.list = [];

      uni.getLocation({
        success: (res) => {
          this.longitude = res.longitude;
          this.latitude = res.latitude;
        },
        complete: () => {
          this.getList();
        }
      });
    },

    async getList() {
      let { list: oldList, page, longitude, latitude, store_name } = this;
      this.moreStatus = 2;

      try {
        const res = await this.$allrequest.shop.getMdList({
          page,
          limit: 10,
          longitude,
          latitude,
          store_name
        });
        uni.stopPullDownRefresh();
        this.moreStatus = 1;

        if (!res.code) {
          let { list, row_count } = res.data,
            count = parseInt(row_count);
          if (list.length) {
            oldList.push(...list);
            this.page = page + 1;
          }
          if (oldList.length >= count) {
            this.isEnd = true;
            this.moreStatus = 3;
          }
        }
      } catch (error) {
        this.moreStatus = 1;
        uni.stopPullDownRefresh();
      }
    },

    handle(type, item) {
      switch (type) {
        case "location":
          uni.openLocation({
            latitude: parseFloat(item.latitude),
            longitude: parseFloat(item.longitude),
            name: item.name,
            address: item.address
          });
          break;

        case "tel":
          uni.makePhoneCall({
            phoneNumber: item.mobile
          });
          break;

        case "share":
          if (item.open_status == 0)
            return uni.showToast({
              title: "该店铺已打样！",
              duration: 2000,
              icon: "none"
            });

          uni.setStorageSync("storeMdData", JSON.stringify(item));
          uni.setStorageSync("MdDataReload", "true");
          uni.switchTab({
            url: "/pages/home/home"
          });
          break;

        default:
          break;
      }
    }
  },

  onReachBottom() {
    if (this.isEnd || !this.list.length) {
      return;
    }

    this.$u.throttle(() => {
      this.getList();
    }, 500);
  },

  onPullDownRefresh() {
    this.clearData();
  }
};
</script>

<style lang="scss">
.search {
  background: #fff;
  padding: 24rpx 18rpx;
}

.page {
  min-height: 100vh;
  background: #f2f2f2;
  overflow: hidden;
}

.list {
  padding: 24rpx;

  .item {
    margin-bottom: 24rpx;
    padding: 0 12rpx;
    font-size: 24rpx;
    color: #8c8c8c;
    background: #fff;
    border-radius: 24rpx;
  }

  .item-hd {
    display: flex;
    padding: 24rpx 12rpx;
  }

  .img {
    position: relative;
    width: 160rpx;
    height: 160rpx;
    overflow: hidden;
    image {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 16rpx;
    }

    .status {
      position: absolute;
      left: 0;
      bottom: 0;
      padding: 5rpx 0;
      width: 100%;
      background: rgba(0, 0, 0, 0.5);
      color: #fff;
      border-radius: 0 0 16rpx 16rpx;
      text-align: center;
    }
  }

  .p {
    line-height: 34rpx;

    display: flex;
    justify-content: space-between;

    .distance {
      margin-left: 36rpx;
    }

    .let {
      flex: 1;
      overflow: hidden;
    }
  }

  .time {
    color: #333;
  }

  .con {
    flex: 1;
    overflow: hidden;
    margin: 0 0 0 20rpx;
    min-height: 160rpx;
  }

  .title {
    margin-bottom: 8rpx;
    font-size: 30rpx;
    color: #262626;
    font-weight: bold;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: bold;
  }

  .item-fd {
    display: flex;
    border-top: 1px solid #f6f6f6;

    .btn {
      position: relative;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 82rpx;
      font-weight: bold;
      color: #262626;

      &:first-of-type:before {
        display: none;
      }

      &:before {
        content: "";
        position: absolute;
        left: 0;
        top: 26rpx;
        bottom: 26rpx;
        width: 2rpx;
        background: #f6f6f6;
      }

      text {
        font-size: 26rpx;
        margin-left: 12rpx;
      }

      .iconfont {
        font-size: 36rpx;
      }
    }
  }
}
</style>
